<template>
	<view class="">
		<!-- <view class="head">
			<view @click="handleTab(index)" v-for="(item,index) in tabList" :key="index" class="head-item"
				:class="tabIndex==index?'active':''">
				{{item.value}}
			</view>
		</view> -->
		<view v-for="(item,index) in list" class="item" :key="index">
			<view class="item-left">
				<view class="left-title text-cut" style="max-width: 333rpx;">
					{{item.name || '--'}}
				</view>
				<view class="left-item">
					<view class="left-item-title">服务商：</view>
					<view class="left-item-value text-cut">{{item.teamName || '--'}}</view>
				</view>
				<view class="left-item" v-if="item.startTime || item.endTime">
					<view class="left-item-title">有效期至：</view>
					<view class="left-item-value text-cut">{{item.startTime.split(' ')[0]}}-{{item.endTime.split(' ')[0]}} </view>
				</view>
				<view class="left-item">
					<view class="left-item-title">可用次数：</view>
					<view class="left-item-value text-cut">{{item.ableNum || 0}}次</view>
				</view>
				<view class="left-item" v-if="item.iStatus != 0">
					<view class="left-item-title">状态：</view>
					<view class="left-item-value text-cut">{{item.iStatusStr}}</view>
				</view>
			</view>
			<view class="item-right" v-if="item.iStatus == 0 || item.iStatus == 1">
				<view @click="handleUser(item)" class="item-right-btn " :class="{'item-right-btn-disabled':item.iStatus == 1}">
					去使用
				</view>
			</view>
		</view>
		<view class="mt-20">
			<data-null v-if="!list.length"></data-null>
		</view>
		
		<view class="none" v-if="!(total > params.page * params.limit) && list.length">
			没有更多了～
		</view>
	</view>
</template>

<script>
	import { getEnumList } from "@/api/pet/index/saler"
	import { pageServePage } from "@/api/pet/service/buyer"
	export default {
		
		data() {
			return {
				params:{
					page:1,
					limit:10,
				},
				list:[],
				total:0,
				tabIndex: 0,
				tabList: [
				],
			}
		},
		methods: {
		
			handleUser(item){
				if(item.iStatus == 1){
					uni.showToast({
						title:"服务已下线",
						icon:"none"
					})
					return
				}
				if(item.iStatus == 2){
					uni.showToast({
						title:"服务已作废",
						icon:"none"
					})
					return
				}
				if(item.iStatus == 3){
					uni.showToast({
						title:"服务已使用",
						icon:"none"
					})
					return
				}
				if(item.iStatus == 4){
					uni.showToast({
						title:"服务已结束",
						icon:"none"
					})
					return
				}
				this.$emit('handleUser',item)
			},
			async getEnumList(){
				let res = await getEnumList()
				res.serveIssueStatus.forEach(item=>{
					if(item.value.split('/').length >= 2){
						item.value = item.value.split('/')[0]
					}
				})
				// {value:"全部"},
				this.tabList = [...res.serveIssueStatus]
			},
			reachBottom(){
				if(this.total > this.params.page * this.params.limit){
					this.params.page++
					this.getList()
				}
			},
			getList(){
				pageServePage({
					...this.params,
					// iStatus:this.tabList[this.tabIndex].key
				}).then(res=>{
					this.list = [...this.list,...res.rows]
					this.total = res.total
					uni.hideLoading()
					uni.stopPullDownRefresh();
				})
			},
			async init(type){
				this.params.page = 1
				this.list = []
				if(type == 'getEnumList'){
					await this.getEnumList()
				}
				this.getList()
			},
			handleTab(index){
				this.tabIndex = index
				this.init()
			},
		}
	}
</script>

<style scoped lang="scss">
	.item-right-btn-disabled{
		filter:grayscale(100%) !important;
	}
	.none{
		width: 100%;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: var(--h4Color);
		line-height: 33rpx;
		margin-top: 40rpx;
	}
	.head{
		width: 100%;
		padding: 12rpx 0 58rpx;
		display: flex;
		// background: #ffe359;
		.head-item{
			width: 33.33%;
			position: relative;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: var(--h2Color);
			line-height: 40rpx;
		}
		.active{
			font-weight: 600;
			color: var(--h1Color);
			&::after{
				content: '';
				position: absolute;
				left: 50%;
				bottom: -8rpx;
				transform: translateX(-50%);
				width: 32rpx;
				height: 4rpx;
				background: var(--h1Color);
				border-radius: 3rpx;
			}
		}
	}
	
	
	
	.item {
		width: 100%;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
		padding: 22rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.item-left {
			flex: 1;

			.left-title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: var(--h1Color);
				line-height: 45rpx;
				margin-bottom: 24rpx;
			}

			.left-item {
				width: 100%;
				display: flex;
				align-items: center;
				overflow: hidden;
				margin-bottom: 12rpx;

				&:last-child {
					margin-bottom: 0;
				}

				view {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: var(--h2Color);
					line-height: 40rpx;
				}

				.left-item-title {
					width: 152rpx;

				}

				.left-item-value {
					max-width: 333rpx;
					flex: 1;
				}
			}
		}

		.item-right {
			height: 226rpx;
			display: flex;
			align-items: center;
			padding-left: 35rpx;
			border-left: 1rpx dashed #E5E5E5;
			margin-left: 10rpx;

			.item-right-btn {
				width: 142rpx;
				background: var(--primaryGradBg);
				border-radius: 12rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: var(--btnColor);
				line-height: 64rpx;
				text-align: center;
			}
		}
	}
</style>